<template>
  <div>
      <div class="table_title">
        <div class="title_icon">
            <slot name="title"></slot>
        </div>
        <div class="titleText"> {{titleText}}</div>
      </div>
      <div class="mytable" v-if="tableData">
        <el-table v-bind="attrs" :data="tableData.list" border>
          <el-table-column :prop="item.dataIndex" v-for="item in columns" :label="item.label">
             <template #default="{row}" v-if="item.isDate">
                    {{new Date(row[item.dataIndex]).toLocaleDateString()}}
             </template>
              <template #default="{row}" v-if="item.isTime">
                    {{changeTime(row[item.dataIndex])}}
             </template>
             <template v-if="item.isCostom"  #default="{row}">
                <span v-if="item.isPower"> 
                    {{row[item.dataIndex]=="1"?"系统管理员":"课程管理员"}}
                </span>
             </template>
              <template #default="{row}" v-if="item.dataIndex=='action'">
                    <slot :row="row" name="action"></slot>
             </template>
          </el-table-column>
        </el-table>
        <div>
          <el-pagination :total="tableData.count" background layout="prve,pager,next" :page-size="tableData.pageSize" @current-change="pageChange"></el-pagination>
        </div>
      </div>
  </div>
</template>
<script setup>
  import {Calendar} from '@element-plus/icons-vue'
  
  import {defineProps,defineEmits,useAttrs} from 'vue'
            // title: '姓名',
            // dataIndex: 'name',
            // key: 'name',
let attrs=useAttrs(); //除props 外 的父传子属性
  let props=defineProps({
    titleText:{ //标题
      type:String,
      default:'列表'
    },
    columns:{//表头的数据
        type:Array,
        default:()=>[]
    },
    tableData:{ //表格的数据  包含list total pageSize pageStart
        type:Object,
        default:()=>{}
    }
  })
  let changeTime=(time)=>{
      let min=0;
      let s=0;
      min=parseInt(time/60)
      s=time%60
      return `${min<10?'0'+min:min}分${s<10?'0'+s:s}秒`
  }
  let emits=defineEmits(["sendPage"])
  let pageChange=(val)=>{
    emits("sendPage",val)
  }
</script>
<style lang="scss">
    .table_title{
      width: 900px;
      height: 40px;
      display: flex;
      border: 1px solid white;
      color:white;
      margin: 0 auto;
      .title_icon{
        width: 40px;
        height: 40px;
        border: 1px solid white;
      }
      .titleText{
        margin-left: 20px;
        line-height: 40px;
      }
    }
    .mytable{
          width: 900px;
          margin: 0 auto;
      
    }
</style>